var url = "http://127.0.0.1:8000/";
$(function () {
    //后台轮播图界面的展示
    $.ajax({
        type: 'GET',
        url: url + '/updateLoopInfo',
        dataType: "json",
        success: function (data) {
            data = data.data;
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<ul>" +
                    "<li>" + data[i]['id'] + "</li>" +
                    "<li>" + data[i]['loop_title'] + "</li>" +
                    "<li><img src=/" + data[i]['img_path'] + " class='img'></li>" +
                    "<li>" + data[i]['article_title'] + "</li>" +
                    "<li><span class=" + 'update' + ">" + "修改" + "</span>" +
                    "</li><li style='display: none'>" + data[i]['article_id'] + "</li></ul>";
                var info = data[i];
            }
            $('.Rotation-set').append(html);

        }
    });
    //修改界面的展示
    // $.ajax({
    //     type: 'GET',
    //     url: '/updateLoopInfo',
    //     dataType: "json",
    //     success: function () {
    // var html = "";
    // html = "<div class='row1 row'>" +
    //     "轮播图标题:<input type='text'  name=' '></div>" +
    //     "<div class='row2 row'>" +
    //     "<form  method='post' id='uploadF' enctype='multipart/form-data'><span>图片:</span><img name='pic' src='' id=\"show_img\">" +
    //     "<input type='file' name=\"picture\" class='updateImg'></form></div>" +
    //     "<div class='row3 row'>" +
    //     "文章标题<input type='text' name='' class='article_title'>" +
    //     "<button class='select' type='button'>选择文章</button>" +
    //     "</div>" +
    //     "<div class='row4 row'>" +
    //     "<button class='submit' type='button' style=\"margin-right: 50px;margin-left: 60px;\">提交</button>" +
    //     "<button class='detele' type='button'>取消</button>" +
    //     "</div>";
    // $('.lunbo').append(html);
    //     }
    // });


    //修改界面的数据
    var loop_id;
    $(document).on("click", ".update", function () {
        $(".lunbo").css("display", "block");
        loop_id = $(this).parents("ul").find("li").eq(0).html();
        post_id = $(this).parents("ul").find("li").eq(5).html();
        let loop_title = $(this).parents("ul").find("li").eq(1).html();
        let loop = $(this).parents("ul").find("li").eq(2).find("img").attr("src");
        let article_title = $(this).parents("ul").find("li").eq(3).html();
        $(".row1>input").val(loop_title);
        $(".row3 input").val(article_title);
        $(".row2 img").attr("src", loop);
    })


    //文章搜索
    var post_id;
    let page;
    $(document).on("click", ".search_article", function () {
        let search = $("#search_post").val();
        page = 1;
        searchArticle(url, page, search);
        $('#search_post').val('');
    });

    //上一页
    $(document).on("click", ".last-page", function () {
        if (page === 1) {
            hint("已经是第一页了！");
        } else {
            page = page - 1;
            let search = $(".hide input").val();
            searchArticle(url, page, search);
        }
    });
    //下一页
    $(document).on("click", ".next-page", function () {
        if (page === last) {
            hint("已经是最后一页了！");
        } else {
            page = page + 1;
            let search = $(".hide input").val();
            searchArticle(url, page, search);
        }
    });


    //文章函数函数
    let url = url + "/searchArticle";
    let last;

    function searchArticle(url, page, search) {
        if (page === undefined) {
            url_temp = url;
        } else {
            url_temp = url + '?page=' + page;
        }
        $.ajax({
            type: 'POST',
            url: url_temp,
            dataType: "json",
            data: {
                article_title: search
            },
            success: function (data) {
                last = data.data.last_page;
                page = data.data.current_page;
                data = data.data.data;
                $('.list1').empty();
                var html = "";
                for (i = 0; i < data.length; i++) {
                    html += "<a><li class='title' style='cursor: pointer;padding: 5px'><span style='display:none;'>" + data[i]['article_id'] +
                        "</span><span>" + (((page - 1) * 5) + i + 1) + "." + "</span><span>" + data[i]['article_title'] + "</span></li></a>";
                }
                $('.list1').append(html);
                //数字分页
                $(".pages").empty();
                var html = '';
                for (i = 1; i <= last; i++) {
                    html += "<div class='page' style='margin-right:5px; margin-left:5px;float: left;background: gray;'>" +
                        i + "</div>"
                }
                $(".pages").append(html);
                $(".last-page").css("display", "block");
                $(".next-page").css("display", "block");
            }
        });
    }

    //数字分页
    $(document).on("click", ".page", function () {
        page = $(this).html();
        let search = $(".hide input").val();
        searchArticle(url, page, search);
    });


    //保存修改
    $(document).on("click", ".submit", function () {
        let loop_title = $(".row1 input").val();
        let article_title = $(".row3 input").val();
        if (img_path === "") {//不修改图片
            $.ajax({
                type: "POST",
                url: "/updateLoopInfo",
                dataType: "json",
                data: {
                    id: loop_id,
                    loop_title: loop_title,
                    article_title: article_title,
                    article_id: post_id,
                },
                success: function () {
                    $.ajax({
                        type: 'GET',
                        url: "/updateLoopInfo",
                        dataType: "json",
                        success: function (data) {
                            $(".lunbo").css("display", "none");
                            $('.Rotation-set').empty();
                            data = data.data;
                            var html = "";
                            for (var i = 0; i < data.length; i++) {
                                html += "<ul>" +
                                    "<li>" + data[i]['id'] + "</li>" +
                                    "<li>" + data[i]['loop_title'] + "</li>" +
                                    "<li><img src=/" + data[i]['img_path'] + " ></li>" +
                                    "<li>" + data[i]['article_title'] + "</li>" +
                                    "<li><span class=" + 'update' + ">" + "修改" + "</span>" +
                                    "</li><li style='display: none'>" + data[i]['article_id'] + "</li></ul>";
                                var info = data[i];
                            }
                            $('.Rotation-set').append(html);
                        }
                    });
                }
            });
        } else {//修改图片
            $.ajax({
                type: "POST",
                url: url + "/updateLoopInfo",
                dataType: "json",
                data: {
                    id: loop_id,
                    loop_title: loop_title,
                    img_path: img_path,
                    article_title: article_title,
                    article_id: post_id,
                },
                success: function () {
                    $.ajax({
                        type: 'GET',
                        url: url + "/updateLoopInfo",
                        dataType: "json",
                        success: function (data) {
                            $(".lunbo").css("display", "none");
                            $('.Rotation-set').empty();
                            data = data.data;
                            var html = "";
                            for (var i = 0; i < data.length; i++) {
                                html += "<ul>" +
                                    "<li>" + data[i]['id'] + "</li>" +
                                    "<li>" + data[i]['loop_title'] + "</li>" +
                                    "<li><img src=/" + data[i]['img_path'] + " ></li>" +
                                    "<li>" + data[i]['article_title'] + "</li>" +
                                    "<li><span class=" + 'update' + ">" + "修改" + "</span>" +
                                    "</li><li style='display: none'>" + data[i]['article_id'] + "</li></ul>";
                                var info = data[i];
                            }
                            $('.Rotation-set').append(html);
                        }
                    });
                }
            })
        }

    });
    //取消修改的界面
    $(document).on("click", ".detele", function () {
        $(".lunbo").css("display", "none");
    });

    //点击搜索的界面
    $(document).on("click", ".select", function () {
        $(".lunbo").css("display", "none");
        $(".hide").css("display", "block");
        $('.list1').empty();
    });

    //搜索后选择某篇文章
    $(document).on("click", ".title", function () {
        let title = $(this).find("span").eq(2).html();
        post_id = $(this).find("span").eq(0).html();
        $(".row3 input").val(title);
        $(".hide").css("display", "none");
        $(".lunbo").css("display", "block");
        //article_id=data[i]['article_id'];
    });

    //选择图片的实时展示
    var img_path;
    $(document).on("change", ".updateImg", function () {
        formData = new FormData(document.getElementById("uploadF"));
        $.ajax({
            type: "post",
            url: url + '/upImage',
            data: formData,
            datatype: 'json',
            cache: false,
            traditional: true,
            contentType: false,
            processData: false,
            success: function (data) {
                let img = url + data.data;
                img_path = data.data;
                if (data.code === 200) {
                    $(".row2 img").attr("src", img);
                }
            }
        })
    })

});

